<template>
    <!--左边栏-->
    <el-aside class="aside">
      <el-col :span="12" class="elcol">
        <h5 class="logo"><img src="../../assets/img/logo.png" alt=""></h5>
        <el-menu default-active="2" class="el-menu-vertical-demo elmenus" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1" class="elmenu">
            <i class="icon iconfont icon-renyuanguanli1"></i>
            <span slot="title">客户管理</span>
          </el-menu-item>
          <el-menu-item index="2" class="elmenu">
            <i class="icon iconfont icon-renyuanguanli"></i>
            <span slot="title">员工管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>
</template>

<script>
    export default {
        name: "aside-left",
      data () {
        return {
          input4: '',
        }
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        handleDelete(index, row) {
          console.log(index, row);
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }
</script>

<style lang="scss">
  /*左边栏*/
  .aside{
    width: 200px!important;
    height:1000px;
    background-color: #242536;
  }
  .logo{
    width: 130px;
    height: 17px;
    margin:17px auto 16px;
  }
  .logo>img{
    width: 130px;
    height: 17px;
  }
  .elcol{
    width:100%;
  }
  .elmenus{
    display:flex;
    justify-content: flex-start;
    align-items:flex-start;
    flex-direction: column;
    background: #242536!important;
  }
  .elmenu{
    height: 40px !important;
    display:flex;
    align-items: center;
    width:100%;
    background-color: #22b2a9!important;
    span{
      display:block;
      padding-left:10px;
      height:100%;
      line-height: 40px;
    }
    i{
      font-size:18px;
      color:#fff!important;
    }
  }
  .elmenu:nth-child(1){
    background: #242536!important;
  }
  .elmenu>span{
    color:#fff;
    font-size:14px;
  }
</style>
